<div class="main-container">
  <div class="button-group">
    <button nz-button nzType="primary"
            *ngIf="editType == 'add' || editType == 'edit'"
            (click)="saveFlow()">保存模板</button>
    <button nz-button nzType="primary" (click)="backToList()">返回</button>
  </div>

  <div nz-row nzGutter="12">
    <div nz-col class="gutter-row" nzSpan="24">
      <div class="gutter-box">
        <nz-card [nzBordered]="false">
          模板名称：<input nz-input [(ngModel)]="flowName" style="width: 300px;margin-right: 20px;"/>

          关联表单：<input nz-input [(ngModel)]="relaForm" style="width: 300px;"/>
        </nz-card>
      </div>
    </div>
  </div>

  <div class="gooflow-content">
    <div id="flowTemp" class="flowTemp" style="margin:10px;">

    </div>
    <div class="node-property">
      <nz-card [nzBordered]="false" style="margin-top:10px;">
        <form nz-form [formGroup]="gooflowForm">


          <ng-container *ngIf="gooflowForm.value.model !== 'line'">
            <nz-divider nzText="业务属性"></nz-divider>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="auditType">审核类型</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <nz-select formControlName="auditType">
                  <nz-option nzValue="member" nzLabel="指定人员"></nz-option>
                  <nz-option nzValue="creator" nzLabel="发起人"></nz-option>
                  <nz-option nzValue="creatorOrg" nzLabel="发起人组织"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="auditVal">审核对象</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="auditVal" id="auditVal"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="allowBack">是否允许回退</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <nz-select formControlName="allowBack">
                  <nz-option nzValue="1" nzLabel="是"></nz-option>
                  <nz-option nzValue="0" nzLabel="否"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="formFields">表单字段配置</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <textarea nz-input formControlName="formFields" id="formFields"></textarea>
              </nz-form-control>
            </nz-form-item>

            <nz-divider nzText="节点属性"></nz-divider>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="compid">节点代码</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="code" id="code"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">名称</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="name" id="name"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="type">类型</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="type" id="type"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="model">属性</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="model" id="model"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="left">左边距</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="left" id="left"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="top">上边距</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input type="number" nz-input formControlName="top" id="top"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="width">宽度</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="width" id="width"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="height">高度</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="height" id="height"/>
              </nz-form-control>
            </nz-form-item>
          </ng-container>

          <ng-container *ngIf="gooflowForm.value.model === 'line'">
            <nz-divider nzText="连接属性"></nz-divider>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="compid2">节点代码</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="code" id="compid2"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name2">名称</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="name" id="name2"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="from">起始节点</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="from" id="from"/>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="to">结束节点</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="to" id="to"/>
              </nz-form-control>
            </nz-form-item>

          </ng-container>
          <nz-form-item nz-row class="register-area">
            <nz-form-control [nzSpan]="14" [nzOffset]="6">
              <button nz-button nzType="primary" (click)="editFlowItem()">确定</button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </nz-card>
    </div>
  </div>


</div>
